<!DOCTYPE html>

<ui:composition template="../template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    
    <ui:define name="content">
        
        <!-- ================== LISTADO DE CLIENTES ================-->
        <h:panelGroup  rendered="#{!clienteBean.mostrarForm}" id="panelListado"> 
            <div class="col-md-6">
                <h4>Mantenimiento de Clientes</h4>
                <h:form id="formListadoClientes">  
                    <div>
                        <h:commandButton value="Nuevo" class="btn btn-default" action="#{clienteBean.verFormulario(null)}" />                                 
                    </div>
                    <br/>
                    <div class="input-group input-group-sm" style="padding-bottom: 5px;">
                        <h:inputText class="form-control input-sm" id="txtBuscar" onkeypress="if(event.keyCode == 13) { return false; }" value="#{clienteBean.cadenaBusqueda}"/>
                        <span class="input-group-addon">
                            <h:commandButton value="Buscar" class="btn btn-default  btn-xs" action="#{clienteBean.buscar()}" style="padding-bottom: 0px; padding-top: 0px;"/>
                        </span>
                    </div>   
                    <h:panelGroup  rendered="#{clienteBean.listaClientes.size() > 0}" id="pnlnorows">      
                        <div class="panel panel-default">
                            <div class="table-responsive">
                                <p:dataTable var="p" value="#{clienteBean.listaClientes}" 
                                             paginator="true" rows="10"   paginatorPosition="bottom" 
                                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                             rowsPerPageTemplate="5,10,15"   styleClass="table table-bordered table-striped table-condensed"
                                             style="font-size: 12px;">  
                                    <p:column>  
                                        <div style="text-align: center;">
                                            <h:commandLink action="#{clienteBean.verFormulario(p)}" class="btn btn-default btn-xs" title="Editar">                                     
                                                <h:graphicImage  library="pics" name="edit.png" width="15px;"/>                                    
                                            </h:commandLink>
                                        </div>
                                    </p:column> 
                                    <p:column >    				
                                        <f:facet name="header">C&#243;digo</f:facet>    				
                                        #{p.idCliente}
                                    </p:column>
                                    <p:column >    				
                                        <f:facet name="header">Descripci&#243;n</f:facet>    				
                                        #{p.descripcion}
                                    </p:column>
                                    <p:column >
                                        <f:facet name="header">Tipo</f:facet>
                                        #{p.tipoCliente}
                                    </p:column>                              
                                    <p:column>
                                        <div style="text-align: center;">
                                            <h:commandButton class="btn btn-default btn-xs" action="#{clienteBean.eliminar(p)}" value="X" 
                                                             title="Eliminar"/>
                                        </div>
                                    </p:column> 
                                </p:dataTable> 
                            </div>
                        </div>
                    </h:panelGroup>
                </h:form>            
            </div>
            </h:panelGroup> 
            <!-- =========================================  -->
            
            <!--==================== FORMULARIO CLIENTES =================-->
            <h:panelGroup  rendered="#{clienteBean.mostrarForm}" id="panelFormulario">   
                <h:outputScript target="head">  $ = jQuery;</h:outputScript><!--ESTA LINA ES NECESARIA PARA QUE FUNCIONE JQUERY-->
                <script type="text/javascript">
                    $(document).ready(function(){
                        $(".ui-messages").fadeOut(3000);       
                    });                
                </script>

                <div class="col-md-10">
                    <h:form id="formCliente">
                        <div class="btn-group" > 
                            <h:commandButton value="Regresar" class="btn btn-default" action="#{clienteBean.iniciar()}" immediate="true"/>  
                            <h:commandButton value="Grabar" class="btn btn-default" action="#{clienteBean.grabar()}" /> 
                        </div>            

                        <br/>
                        <!-- se pone for="idCliente" para que no aparezca el sumario de mensajes y solamtene salgan los asteriscos-->
                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" escape="false" for="idCliente"/> 
                        <br/>

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Mantenimiento de Clientes</h3>
                            </div>
                            <div class="panel-body">
                                <div class="form-horizontal" id="formControles"> <!-- DIV COMO SI FUERA UN FORM-->
                                    <h:inputHidden value="#{clienteBean.cliente.idCliente}" id="idCliente"/>                        
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <div class="form-group">
                                                <label for="nombre" class="col-sm-4 control-label" >Raz&#243;n Social (*)</label>
                                                <div class="col-sm-6">
                                                    <h:inputText  class="form-control input-sm mayuscula" id="nombre" value="#{clienteBean.cliente.descripcion}" required="true" requiredMessage="*" />                              
                                                </div>
                                                <h:message for="nombre" class="obligatorio"/>
                                            </div>                            
                                        </div>
                                        <div class="col-xs-6">
                                            <div class="form-group">
                                                <label for="ruc" class="col-sm-4 control-label">Ruc (*)</label>
                                                <div class="col-sm-6">
                                                    <p:inputMask styleClass="form-control input-sm mayuscula"  mask="99999999999"
                                                                 id="ruc" value="#{clienteBean.cliente.ruc}" required="true" requiredMessage="*"/>                                                                                                  
                                                </div>
                                                <h:message for="ruc" class="obligatorio"/>     
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <div class="form-group">
                                                <label for="tipo" class="col-sm-4 control-label">Calificaci&#243;n</label>
                                                <div class="col-sm-6">                                                                     
                                                    <h:selectOneMenu value="#{clienteBean.cliente.tipoCliente}" style="width:100%" id="tipo" class="form-control input-sm">
                                                        <f:selectItem  itemLabel="BAJO" itemValue="BAJO" />
                                                        <f:selectItem  itemLabel="MEDIO" itemValue="MEDIO" />          
                                                        <f:selectItem  itemLabel="ALTO" itemValue="ALTO" />                                                                    
                                                    </h:selectOneMenu>
                                                </div>                                   
                                            </div>
                                        </div>
                                        <div class="col-xs-6">
                                            <div class="form-group">
                                                <label for="tipo" class="col-sm-4 control-label">Email (*)</label>
                                                <div class="col-sm-6">
                                                    <h:inputText  class="form-control input-sm mayuscula" id="email" value="#{clienteBean.cliente.email}" required="true" requiredMessage="*"/>                                                                        
                                                </div>
                                                <h:message for="email" class="obligatorio"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <div class="form-group">
                                                <label for="tipo" class="col-sm-4 control-label">Direccion (*)</label>
                                                <div class="col-sm-6">
                                                    <h:inputText  class="form-control input-sm mayuscula" id="direccion" value="#{clienteBean.cliente.direccion}" required="true" requiredMessage="*" />                                
                                                </div>
                                                <h:message for="direccion" class="obligatorio"/>
                                            </div>
                                        </div>      
                                        <div class="col-xs-6">
                                            <div class="form-group">
                                                <label for="tipo" class="col-sm-4 control-label">Telefonos (*)</label>
                                                <div class="col-sm-6">
                                                    <h:inputText  class="form-control input-sm mayuscula" id="telefonos" value="#{clienteBean.cliente.telefonos}" required="true" requiredMessage="*"/>                                
                                                </div>
                                                <h:message for="telefonos" class="obligatorio"/>
                                            </div>
                                        </div>    
                                    </div>                       
                                </div>
                            </div>
                        </div>
                        <h:panelGroup rendered="#{clienteBean.mensajeExito!=null}" id="panelMensaje" >
                            <div style="text-align: center;">
                                <span class="alert alert-success">
                                    <h:outputText value="#{clienteBean.mensajeExito}" escape="false"/>
                                </span>
                            </div>
                        </h:panelGroup>
                    </h:form>
                </div> 
            </h:panelGroup>
            <!-- =========================================  -->
    </ui:define>
</ui:composition>
